<template>
  <div class="container" >
    <div class="claimSettlement">
        <div class="fixed">
            <search @toQuery="toQuery" @clearQuery="_caseList('reload')"></search>
            <div class="tab-list">
                <div class="tab-item" :class="{'active': index === currentIndex}" v-for="(item, index) in tabArr" :key="index" @click="handleTabChange(index)">
                    <span>{{item}}</span>
                </div>
            </div>
        </div>
        <ul class="content-list">
            <li class="list-item" v-for="(item, index) in caseList" :key="index">
                <div class="header">
                    <div class="left">出险人：{{item.F_EmpName}}</div>
                    <div class="right btn" @click="submitMaterial(item)" v-if="status===0">
                        提交材料
                    </div>
                    <div class="right btn" @click="sendExpress(item)" v-if="status===2&&item.F_Status===40">
                        发快递
                    </div>
                    <div class="right yellow" v-if="status===2&&item.F_Status!==40">
                        {{item.StatusName}}
                    </div>
                    <div class="right btn" @click="fixedMaterial(item)" v-if="status===3">
                        修改材料
                    </div>
                </div>
                <div class="content">
                    <p><span class="des">报案时间：</span><span>{{item.F_CaseDate}}</span></p>
                    <p><span class="des">证件号码：</span><span>{{item.F_IDNum}}</span></p>
                    <p><span class="des">出险地点：</span><span>{{item.F_CaseAddress}}</span></p>
                    <p><span class="des">理赔金额：</span><span>{{item.F_TotalAmount}}</span></p>
                </div>
            </li>
            <no-result v-if="caseList.length === 0"></no-result>
        </ul>
    </div>
  </div>
</template>

<script>
import search from '@/components/search'
import noResult from '@/components/no-result'
import { caseList } from 'api/api'
export default {
    data () {
        return {
            currentIndex: 0,
            userInfo: {},
            tabArr: ['预审材料', '预审中', '预审通过', '预审驳回'],
            status: 0,
            pageSize: 10,
            pageIndex: 1,
            keyword: '',
            caseList: [],
            hasMore: true
        }
    },

    components: {
        search,
        noResult
    },
    methods: {
        bindViewTap () {
            const url = '../logs/index'
            wx.navigateTo({ url })
        },
        async handleTabChange (index) {
            this.currentIndex = index
            this.status = index
            await this._caseList('reload')
        },
        sendExpress (item) {
            wx.navigateTo({
                url: `../claim/sendExpress?CaseId=${item.CaseId}`
            })
        },
        submitMaterial (item) {
            // 把当前案子传入vuex
            this.$store.commit('claim/SETCLAIM', item)
            wx.navigateTo({
                url: '../claim/submitMaterial'
            })
        },
        // 修改材料
        fixedMaterial (item) {
            this.$store.commit('claim/SETCLAIM', item)
            this.$store.commit('claim/SETINTOTYPELIST', 'edit')
            wx.navigateTo({
                url: '../claim/sureList'
            })
        },
        toQuery (val) {
            this.keyword = val
            this._caseList()
        },
        _caseList (type) {
            this.caseList = []
            caseList(this.status, this.pageSize, this.pageIndex, this.keyword)
                .then((res) => {
                    console.log(res)
                    this.total = res.data.records
                    if (this.pageIndex * this.pageSize > this.total) {
                        this.hasMore = false
                    } else {
                        this.hasMore = true
                    }
                    res.data.rows.forEach(item => {
                        item.F_CaseDate = item.F_CaseDate.replace('T00:00:00', ' ').replace('T', ' ')
                    })
                    if (type === 'reload') {
                        this.caseList = res.data.rows
                    } else {
                        this.caseList = this.caseList.concat(res.data.rows)
                    }
                })
        }
    },
    async onReachBottom () {
        if (!this.hasMore) {
            return
        }
        this.pageIndex += 1
        console.log('上拉')
        wx.showLoading({
            title: '加载中'
        })
        await this._caseList()
        wx.hideLoading()
    },
    // 下拉刷新
    async onPullDownRefresh () {
        this.pageIndex = 1
        wx.showLoading({
            title: '刷新中'
        })
        await this._caseList('reload')
        wx.stopPullDownRefresh()
        wx.hideLoading()
    },
    async onShow () {
        this.status = Number(this.$root.$mp.query.status) || 0
        this.currentIndex = Number(this.$root.$mp.query.status) || 0
        await this._caseList('reload')
    }
}
</script>

<style lang='stylus' scoped>
.claimSettlement
    width 750rpx
    .fixed
        position fixed
        top: 0
        width 100%
        .tab-list
            display:flex
            width:100%
            height:100rpx
            line-height:100rpx
            box-sizing:border-box
            position:relative
            justify-content:space-around
            align-items:center
            background:#fff
            .tab-item
                flex:1
                display:flex
                width:100%
                justify-content:center
                align-items:center
                flex-direction:column
                text-align:center
                position:relative
                &.active
                    span
                        border-bottom:2rpx solid #007aff

    .content-list
        padding 220rpx 39rpx 0
        .list-item
            border-radius 8rpx
            display flex
            flex-direction column
            background #fff
            margin-bottom 15rpx
            font-size 25rpx
            .header
                height 100rpx
                padding 0 22rpx 0 34rpx
                display flex
                justify-content space-between
                border-bottom 1rpx solid #f5f5f5
                align-items center
                .left
                    font-weight 600
                .right
                    height 51rpx
                    line-height 51rpx
                    width 170rpx
                    text-align center
                    &.btn
                        background #007aff
                        color #fff
                        border-radius 7rpx
                    &.yellow
                        color #ff9933
                    &.gray
                        color #666666

            .content
                padding 22rpx 33rpx 48rpx
                line-height 35rpx


</style>
